import React, { Component } from 'react'
const ColorContext = React.createContext()
// class Third extends Component {
//   static contextType = ColorContext
//   render () {
//     return (
//       <div>
//         后代组件 - { this.context }
//       </div>
//     )
//   }
// }
// class Third extends Component {
  
//   render () {
//     return (
//       <div>
//         后代组件 - 
//         <ColorContext.Consumer>
//           {
//             (value) => {
//               return (
//               <span>{ value }</span>
//               )
//             }
//           }
//         </ColorContext.Consumer>
//       </div>
//     )
//   }
// }
function Third () {
  return (
    <div>
      后代组件 - 
      <ColorContext.Consumer>
          {
            (value) => {
              return (
              <span>{ value }</span>
              )
            }
          }
      </ColorContext.Consumer>
    </div>
  )
}
class Second extends Component {
  render () {
    return (
      <div>
        中间组件
        <hr />
        <Third />
      </div>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <div>
        祖先组件
        <hr />
        <ColorContext.Provider value = 'green' >
          <Second />
        </ColorContext.Provider>
      </div>
    )
  }
}
